import { prisma } from '@/lib/prisma';
import { notFound } from 'next/navigation';
import Image from 'next/image';
import { SaveButton } from './SaveButton';
import { ActivityList } from './ActivityList';

type DestinationWithDetails = {
  id: string;
  name: string;
  description: string | null;
  imageUrl: string | null;
  metadata: {
    location: string;
    bestTimeToVisit: string;
    tips: string;
    category: string;
  } | null;
  activities: {
    id: string;
    title: string;
    description: string | null;
    metadata: {
      duration: string;
    } | null;
  }[];
  savedBy: {
    id: string;
    name: string | null;
  }[];
};

async function getDestination(id: string): Promise<DestinationWithDetails> {
  const destination = await prisma.destination.findUnique({
    where: { id },
    include: {
      activities: {
        select: {
          id: true,
          title: true,
          description: true,
          date: true,
          metadata: true
        },
        orderBy: {
          date: 'desc'
        }
      },
      savedBy: {
        select: {
          id: true,
          name: true
        }
      }
    }
  });

  if (!destination) notFound();

  // 转换数据以匹配 DestinationWithDetails 类型
  return {
    id: destination.id,
    name: destination.name,
    description: destination.description,
    imageUrl: destination.imageUrl,
    metadata: destination.metadata as {
      location: string;
      bestTimeToVisit: string;
      tips: string;
      category: string;
    } | null,
    activities: destination.activities.map(activity => ({
      id: activity.id,
      title: activity.title,
      description: activity.description,
      metadata: activity.metadata as {
        duration: string;
      } | null
    })),
    savedBy: destination.savedBy
  };
}

export default async function DestinationDetailPage({
  params
}: {
  params: { id: string }
}) {
  const destination = await getDestination(params.id);

  return (
    <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
      <div className="bg-white rounded-lg shadow-lg overflow-hidden">
        <div className="relative h-96">
          {destination.imageUrl ? (
            <Image
              src={destination.imageUrl}
              alt={destination.name}
              fill
              className="object-cover"
            />
          ) : (
            <div className="w-full h-full bg-gray-100 flex items-center justify-center">
              <svg
                className="w-20 h-20 text-gray-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                />
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                />
              </svg>
            </div>
          )}
        </div>

        <div className="p-8">
          <div className="flex justify-between items-start mb-6">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">
                {destination.name}
              </h1>
              {destination.description && (
                <p className="mt-2 text-gray-600">{destination.description}</p>
              )}
            </div>
            <SaveButton 
              destinationId={destination.id} 
              savedBy={destination.savedBy} 
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div className="space-y-4">
              <div className="flex items-center text-gray-600">
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span>{destination.metadata?.location}</span>
              </div>
              <div className="flex items-center text-gray-600">
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <span>最佳游览时间：{destination.metadata?.bestTimeToVisit}</span>
              </div>
              <div className="flex items-center text-gray-600">
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>温馨提示：{destination.metadata?.tips}</span>
              </div>
            </div>
          </div>

          <div>
            <h2 className="text-2xl font-bold text-gray-900 mb-6">推荐活动</h2>
            <ActivityList activities={destination.activities} />
          </div>
        </div>
      </div>
    </div>
  );
} 